<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          ADMIN CONSOLE
        </q-toolbar-title>

        <q-space/>
        <q-space/>

        <div class="q-pl-sm q-gutter-sm row items-center no-wrap">

          <q-btn dense flat no-wrap>
            <q-avatar rounded size="20px">
              <img src="https://cdn.quasar.dev/img/avatar3.jpg">
            </q-avatar>
            <q-icon name="arrow_drop_down" size="16px"/>

            <q-menu auto-close>
              <q-list dense>
                <q-item class="GL__menu-link-signed-in">
                  <q-item-section>
                    <div>已登陆 <strong>{{ admin.Username }}</strong></div>
                  </q-item-section>
                </q-item>
                <q-separator/>
                <q-separator/>
                <q-item clickable class="GL__menu-link">
                  <q-item-section @click="$router.push('/settings')">设 置</q-item-section>
                </q-item>
                <q-item clickable class="GL__menu-link">
                  <q-item-section @click="logout">退 出</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list padding class="rounded-borders text-primary">
        <q-item
          clickable
          v-ripple
          :active="link === 'groups'"
          @click="link = 'groups'"
          active-class="my-menu-link"
          to="/groups"
        >
          <q-item-section avatar>
            <q-icon name="list"/>
          </q-item-section>

          <q-item-section>分组管理</q-item-section>
        </q-item>
        <q-item
          clickable
          v-ripple
          :active="link === 'links'"
          @click="link = 'links'"
          active-class="my-menu-link"
          to="/links"
        >
          <q-item-section avatar>
            <q-icon name="share"/>
          </q-item-section>

          <q-item-section>链接管理</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false,
      link: 'links',
      admin: {
        Username: ''
      }
    }
  },
  created () {
    this.$axios.get('/info').then(data => {
      if (data) {
        this.admin = data
      } else {
        this.$router.push('/login')
      }
    }).catch(() => {
      this.$router.push('/login')
    })
  },
  methods: {
    logout () {
      this.$axios.get('/logout').then(_ => {
        localStorage.removeItem('Authorization')
        this.$router.push('/login')
      }).catch(() => {
        localStorage.removeItem('Authorization')
        this.$router.push('/login')
      })
    }
  }
}
</script>
<style lang="sass">
.my-menu-link
  color: white
  background: #0073ff
  height: 100%
</style>
